CTO Review — CONDITIONAL APPROVAL

Channel status view is well-implemented — correct use of env vars (QWICKY_SUPABASE_URL, QWICKY_SUPABASE_SERVICE_KEY), no hardcoded secrets, sensible enrichment logic, clean React component with loading/error states. The activity color coding is a nice touch.

⚠️ Vercel function count — merge order required

Adding api/channels.mjs brings the total to 13/12 Vercel functions if merged on the current main branch (currently at 12/12). This will break the Hobby plan deployment.

Required: Merge PR #9 first. That PR removes api/submission/[submissionId]/reject.mjs (consolidated into [action].mjs), netting -1 function (12 → 11). Then this PR can be merged safely (11 → 12).

Merge order: PR #9 first, then PR #7.

Minor: no server-side filtering by current tournament

api/channels.mjs fetches ALL channels and submissions regardless of which tournament the frontend is viewing. For now this is fine (low data volume), but worth noting for future pagination if the data grows.

LGTM once PR #9 is merged. Hold this PR until PR #9 lands on main.

Design Review — UX Designer

Verdict: LGTM (two minor notes, neither blocking)

What works well

• Consistent design tokens — the panel uses bg-qw-dark, border-qw-border, text-qw-accent, text-qw-win, text-qw-loss, text-qw-muted throughout, matching the existing Discord panel and admin UI conventions. Nothing feels out of place visually.
• Panel structure — p-4 bg-qw-dark rounded border border-qw-border as the container correctly nests inside the p-6 qw-panel outer section. Consistent with how other subsections in the Discord integration panel are structured.
• Refresh button style — bg-qw-darker border border-qw-border text-qw-muted hover:text-white hover:border-qw-accent matches the existing utility button pattern precisely. The disabled:opacity-50 on loading state is a nice affordance.
• Current tournament highlight — green dot (●) + text-qw-accent row color gives a clear anchor point. User always knows which row is theirs.
• Activity color-coding — green/yellow/red for recency is intuitive and the thresholds (14d/30d) are reasonable for tournament context.
• Loading and empty states — all three states (initial load, empty, error) are handled with appropriate copy and visual treatment.
• … prefix on channel IDs — clearly communicates truncation without needing a tooltip.
• DivisionResults game date — the 📅 date · Submitted by … pattern integrates cleanly into the existing metadata row. Timezone stripping is the right call.

Minor issues (neither blocking)

1. text-yellow-400 breaks the design token convention

In the activity color logic:

daysAgo > 14 ? 'text-yellow-400' :

Every other color in this component (and codebase) uses a qw-* token. This one raw Tailwind color will create a theming gap if the color palette is ever adjusted centrally. Suggest adding a qw-warning token to tailwind.config.js (map it to #facc15 or similar) and using that here. Low priority, but worth keeping the system clean.

2. <label> element used as a section heading

<label className="block text-qw-muted text-sm">Registered Channels</label>

<label> is a form control element — semantically it should be associated with an <input> via for/htmlFor. Here it's acting as a heading with no form relationship, which is both a semantic issue and a minor accessibility concern (screen readers may announce it oddly). A <p> or <h4> would be more appropriate. The text-qw-muted text-sm styling also makes it feel like secondary text — nudging it to text-sm font-medium text-qw-text would give the section header slightly more presence while staying understated relative to the panel's main h3.

Summary

The channel status view integrates cleanly with the existing admin panel. Information hierarchy is clear, the layout is consistent, and interaction patterns match the rest of the UI. The two notes above are polish items — they can land in a follow-up without blocking this PR.

LGTM once PR #9 is on main. No design changes required before merge.